<template>
  <div class="login">
    <div class="form">
<!--      <img src="./images/logo.png"/>-->
      <form style="margin-top:15px">
        <div class="fields">
          <div style="line-height: 80px;text-align: center;font-size: 20px">系统登录</div>
          <div class="field-input">
            <Icon type="ios-person" :size="20"></Icon>
            <input style="font-size: 15px;" placeholder="手机号" v-model="user.username" type="text" autocomplete="off"/>
          </div>

          <div class="field-input">
            <Icon type="ios-lock" :size="20"></Icon>
            <input style="font-size: 15px;" placeholder="密码" v-model="user.password" type="password" autocomplete="off"/>
          </div>

          <div class="field-submit">
            <Button class="submitBtn" @click.prevent="login" :loading="loading">
              {{loginStatus}}
            </Button>
            <div class="forgot">
              <a href="#">忘记密码?</a>
            </div>
          </div>
        </div>
      </form>
      <div class="disclaimer">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>分站管理系统</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex'

import {
  login
} from '@/api/login'

export default {
  name: 'Login',

  data () {
    return {
      user: {},
      loading: false,
      loginStatus: '登录'
    }
  },

  computed: {
    ...mapState({
      lastRoute: 'lastRoute'
    })
  },

  methods: {
    ...mapMutations([
      'setToken',
      'setUser',
      'setBranchId'
    ]),
    login () {
      this.loading = true
      this.loginStatus = '正在登录...'
      return login(this.user)
        .then(data => {
          if (data.status !== '0000') {
            this.$Message.error(data.msg)
            this.loginStatus = '登录'
            this.loading = false
            return
          }
          this.setToken(data.data.token.token)
          this.setUser(data.data.userInfo)
          this.setBranchId(data.data.userInfo.id)

          this.loginStatus = '登录成功，即将跳转...'
          setTimeout(() => {
            this.$router.replace('/store')
            this.loginStatus = '登录'
            this.loading = false
          }, 300)
        })
        .catch(() => {
          this.loginStatus = '登录'
          this.loading = false
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  * {
    margin: 0;
    padding: 0;
  }

  body {
    overflow: hidden;
  }

  .disclaimer {
    position: relative;
    margin-top: 500px !important;
    text-align: center !important;
    color: white !important;
  }

  #app .login{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background: url("./images/bg.jpg") center center no-repeat;
    background-size: cover;

    .form {
      position: relative;
      padding: 0 !important;
      background: none;
      width: 418px;
      height: 660px;
      margin-top: 20px;

      .title {
        color: #afb1be;
        height: 60px;
        text-align: left;
        font-size: 16px;
      }

      .fields {
        height: 418px;
        position: absolute;
        left: 0;
        right: 0;
        width: 418px;
        background: #fff;

        .field-input {
          width: 400px;
          position: relative;
          margin-left: 8px;

          .ivu-icon {
            position: absolute;
            top: 50%;
            transform: translate(40px, -12px);
          }
        }

        input {
          color: #afb1be;
          width: 360px;
          margin-top: -2px;
          background: none;
          padding: 20px 10px;
          box-sizing: border-box;
          border-top: none;
          border-bottom: 1px solid #afb1be;
          border-right: none;
          border-left: none;
          outline: none;
          font-family: 'Gudea', sans-serif;
          box-shadow: none;
          text-indent: 40px;
          margin-left: 20px;

          &:-webkit-autofill {
            color: #afb1be !important;
            background: #32364a !important;
            border-top: 2px solid #393d52 !important;
            border-bottom: 2px solid #393d52 !important;
            border-right: none !important;
            border-left: none !important;
            outline: none !important;
            box-shadow: none !important;
            transition: all 5000s ease-in-out 0s;
          }
        }

        .field-submit {
          position: relative;
          top: 35px;
          left: 0;
          width: 80%;
          right: 0;
          margin: auto;

          .submitBtn {

            display: block;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 2px;
            width: 330px;
            font-size: 16px;
            background: #169989;
            color: white;
          }

          .forgot {
            float: left;
            font-size: 10px;
            margin-left: 20px;
            margin-top: 11px;
            text-decoration: underline;

            a {
              color: #606479;
            }
          }
        }
      }
    }
  }
</style>
